<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-07-事件处理</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<!-- 事件的基本使用：
    1.使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名称
    2.事件的回调需要配置在 methods 对象中，最终都会在 VM 实例上
    3.methods 中配置的函数不要使用箭头函数，否则 this 就不是 VM 实例了
    4.methods 中配置的函数都是被 Vue 管理的函数， this 的指向是 VM 或 组件实例对象
    5.@click="demo" 和 @click="demo($event)" 效果一样，但是后者可以传参 -->

<div id="root">
    <h2>欢迎来到{{ name }}学习</h2>
    <!-- <button v-on:click="showInfo1">点我提示信息</button> -->
    <button @click="showInfo1()">点我提示信息</button> <!-- 简写形式 -->
    <button @click="showInfo2($event, 666)">点我提示信息</button>
    <br><br>

    <!-- Vue 中的事件修饰符
        1.prevent：阻止默认事件(常用)
        2.stop：阻止事件冒泡(常用)
        3.once：事件只触发一次(常用)
        4.capture：使用事件的捕获模式
        5.self：只有 event.target 是当前操作的元素时才触发事件
        6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
        7.修饰符可以连续写 -->

    <!-- 阻止默认事件(常用) -->
    <a href="http://www.atguigu.com" @click.prevent="showInfo1()">点我提示信息</a>
    <br><br>

    <!-- 阻止事件冒泡(常用) -->
    <div @click="showInfo1">
        <button @click.stop="showInfo1">点我提示信息</button>
    </div>
    <br>

    <!-- 事件只触发一次(常用) -->
    <button @click.once="showInfo1">点我提示信息</button>
    <br><br>

    <input type="text" placeholder="按下回车提示信息" @keyup.enter="showInfo1">
</div>

<!-- 1.Vue中常用的按键别名
        回车 => enter
        删除 => delete
        退出 => esc
        空格 => space
        上 => up
        下 => down
        左 => left
        右 => right

    2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名) -->

<script text="text/javascript">
    const vm = new Vue({
        el: '#root',

        data: {
            name: '尚硅谷',
        },

        methods: {
            showInfo1(event) {
                // console.log(event.target)    // 显示目标元素
                // console.log(this === vm)     // 当前对象为 VM 实例
                alert('同学你好')
            },

            /* showInfo1:(event) => {
                console.log(this)               // 当前对象为 Window 实例
            }, */

            showInfo2(event, number) {
                alert('同学你好' + number)
            },
        },
    })
</script>
</body>
</html>